<template>
  <div :style="{ backgroundColor: store.styleInfo.auxiliaryColor, paddingTop: '50px' }">
    <div class="exhibits-box">
      <!-- 第三级 -->
      <div class="exhibits-left">
        <div
          @click="addCruuent(item.id, item)"
          class="item-box"
          v-for="(item, index) in info.children"
          :key="item.id"
          :style="{
            color: item.id == current ? store.styleInfo.themeColor : '#666666',
          }"
        >
          <span
            :style="{
              color: item.id == current ? store.styleInfo.themeColor : '',
            }"
            >{{ item.text }}</span
          >
          <i
            v-if="store.styleInfo.styleType == 1"
            class="iconfonts"
            :style="{
              fontSize: '40px',
              color: item.id == current ? store.styleInfo.themeColor : '#666666',
            }"
            >&#xe6a3;
          </i>
          <i
            v-if="store.styleInfo.styleType == 2"
            class="iconfonts"
            :style="{
              fontSize: '40px',
              color: item.id == current ? store.styleInfo.themeColor : '#666666',
            }"
          >
            &#xe6a6;
          </i>
          <i
            v-if="store.styleInfo.styleType == 3"
            class="iconfonts"
            :style="{
              fontSize: '56px',
              color: item.id == current ? store.styleInfo.themeColor : '#666666',
            }"
          >
            &#xe6a4;
          </i>
          <i
            v-if="store.styleInfo.styleType == 4"
            class="iconfonts"
            :style="{
              fontSize: '40px',
              color: item.id == current ? store.styleInfo.themeColor : '#666666',
            }"
          >
            &#xe684;
          </i>
        </div>
      </div>
      <div class="exhibits-right" id="exhibits-right-scroll">
        <div class="subTitle" v-if="subTitle">——{{ subTitle }}</div>
        <div class="exhibits-right-heard">
          <img
            style="height: auto; width: 780px"
            class="banner-img t-image--fit-cover t-image--position-center"
            v-if="imgs"
            :src="$filters.getLinkUrl(imgs + '?imageView2/0/w/780/format/webp')"
            alt=""
          />
          <span :style="{}">{{ remarks }}</span>
        </div>
        <!-- 第四级 -->
        <!-- <div class="scroll-x-box" v-if="childItem.length > 0" id="scroll-x-box-parent-box">
          <div
            v-for="(item, index) in childItem"
            @click="addChildId(item.id, index)"
            :style="{ borderColor: '#D2AD77' }"
            :key="item.id"
            class="scroll-x-box-item"
            :id="'scroll-x-box-child' + index"
            :class="{ 'scroll-x-box-item-active': item.id == childNum }"
          >
            <div>
              <span>{{ item.text }}</span>
            </div>
          </div>
        </div>
        <div style="padding: 32px 0; text-indent: 2em" v-if="childItem.length > 0">
          <span class="remarkStyle">{{ childItem[childCurrent].remarks }}</span>
        </div> -->
        <!-- 三四级展品 -->

        <auxiliarys
          :moduleId="current"
          :maxLen="clieWidths"
          :imgBackground="store.styleInfo.auxiliaryColor"
          :exhibitBackground="store.styleInfo.themeColor"
          @emitExhibits="emitExhibits"
        />
        <div class="exhibits-content" v-if="list.length > 0">
          <t-row :gutter="20">
            <t-col
              :xs="4"
              :sm="4"
              :md="4"
              :lg="4"
              :xl="4"
              v-for="(item, index) in list"
              :key="item.id"
              @mouseenter="imgEnter(index, list)"
              @mouseleave="imgLeave(index, list)"
            >
              <div class="exhibits-item" @click="pathInfo(item.id)">
                <div
                  :style="{
                    backgroundColor: store.styleInfo.background,
                    width: '246px',
                    height: '246px',
                    overflow: 'hidden',
                  }"
                >
                  <img
                    style="width: 246px; height: 246px"
                    class="t-image--fit-contain t-image--position-center"
                    :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/2/w/246/h/246/format/webp')"
                    alt=""
                  />
                  <div class="shadow"></div>
                </div>
                <div class="item-title">
                  <span :class="'titleText' + item.id">{{ item.name }}</span>
                  <div class="line" :class="'line' + item.id"></div>
                </div>
              </div>
            </t-col>
          </t-row>
          <!-- <div class="is-null-box" v-else>
            <span>暂无展品</span>
          </div> -->
          <t-row v-if="total > 12">
            <t-col
              :span="12"
              :class="{
                't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
                't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
                't-pagination2': store.styleInfo.themeColor == '#B9463F',
                't-pagination3': store.styleInfo.themeColor == '#343029',
                't-pagination4': store.styleInfo.themeColor == '#171719',
              }"
            >
              <t-pagination
                v-model="parmas.pageNo"
                v-model:pageSize="parmas.pageSize"
                :total="total"
                :showPageSize="false"
                show-jumper
                @change="onChange"
                @page-size-change="onPageSizeChange"
                @current-change="onCurrentChange"
              />
            </t-col>
          </t-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pageChild2',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../../route';
import { urls } from '@/utils/request/upload';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import { ref, watch, reactive, nextTick, onActivated, onDeactivated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
import { imgEnter, imgLeave } from '@/pages/templatePage/components/Subunit/component/hover';
import auxiliarys from './auxiliarys/indexLevel3.vue';
const props = defineProps(['current']);

const imgs = ref('');
const subTitle = ref('');
const remarks = ref('');
const store = useProjectStore();
const { childModel, tabvalue, styleInfo } = storeToRefs(store);
const router = useRouter();
const route = useRoute();
const childItem = ref([]);
const current = ref(1); //第三级id
const childNum = ref(); //第四级id
const info = ref({
  children: [],
  id: 0,
  level: 0,
  number: 3,
  parentId: 0,
  remarks: '',
  sort: 0,
  text: '',
  type: 46,
  value: '',
});
const list = ref([]);
const total = ref(0);
const parmas = reactive({
  pageSize: 12,
  pageNo: 1,
  id: 0,
  value: '',
});
const childCurrent = ref(0);

if (store.childModel.children[0].children.length > 0) {
  current.value = store.childModel.children[0].children[0].id;
  if (store.childModel.children[0].children[0].children.length > 0) {
    childNum.value = store.childModel.children[0].children[0].children[0].id;
  }
}
//点击辅助信息展品跳转
const emitExhibits = (moduleId: number, showpieceid: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: {
      id: showpieceid,
      moduleId: moduleId,
      // projectId: localStorage.getItem('projectId'),
    },
  });
};
// remarks.value = store.childModel.children[0].children[0].remarks;
// imgs.value = store.childModel.children[0].children[0].value;
// if (store.childModel.children[0].children[0].children.length > 0) {
//   childItem.value = store.childModel.children[0].children[0].children;
//   childNum.value = store.childModel.children[0].children[0].children[0].id;
//   parmas.id = childNum.value;
//   // console.log('childItem', childItem.value);

//   init();
// } else {
//   parmas.id = store.childModel.children[0].children[0].id;
//   init();
// }
// const onPageSizeChange = (size) => {
//   init();
// };
const init = async () => {
  // console.log(childItem.value.length);
  if (childItem.value.length === 0) {
    parmas.id = current.value;
  } else {
    parmas.id = childNum.value;
  }
  try {
    let res = await moduleShowpieces(localStorage.getItem('projectId'), parmas);
    // console.log(res.data);
    list.value = res.data.data;
    total.value = res.data.total;
  } catch {}
};
info.value = store.childModel;
// console.log(info.value.children);

const onCurrentChange = (index, pageInfo) => {
  init();
};
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: parmas.id, projectId: localStorage.getItem('projectId') },
  });
};
const onChange = (pageInfo) => {
  // console.log(pageInfo);
};
const addChildId = (e: number, index: number) => {
  childCurrent.value = index;
  childNum.value = e;
  parmas.id = e;

  //   scroll-x-box-parent-box
  // scroll-x-box-child
  var scrollContainer = document.getElementById('scroll-x-box-parent-box');

  // 获取指定元素
  var targetElement = document.getElementById('scroll-x-box-child' + index);

  // 获取横向滚动元素的宽度
  var containerWidth = scrollContainer.offsetWidth;

  // 获取指定元素相对于横向滚动元素的位置
  var elementOffsetLeft = targetElement.offsetLeft - scrollContainer.offsetLeft;
  var elementOffsetRight = elementOffsetLeft + targetElement.offsetWidth;

  // 检查指定元素是否在可视区域之左
  if (elementOffsetLeft < scrollContainer.scrollLeft) {
    // 指定元素在可视区域之左，将其滚动到可视区域左侧
    scrollContainer.scrollLeft = elementOffsetLeft;
  }
  // 检查指定元素是否在可视区域之右
  else if (elementOffsetRight > scrollContainer.scrollLeft + containerWidth) {
    // 指定元素在可视区域之右，将其滚动到可视区域右侧
    scrollContainer.scrollLeft = elementOffsetRight - containerWidth;
  }
  init();
};
const addCruuent = (e: number, item: any) => {
  current.value = item.id;
  remarks.value = item.remarks;
  imgs.value = item.value;
  subTitle.value = item.subTitle;
  parmas.id = current.value;
  if (item.children.length !== 0) {
    childItem.value = item.children;
    // console.log('childItem', childItem.value);
    childNum.value = item.children[0].id;
    // parmas.id = item.children[0].id;
    init();
  } else {
    // console.log(item.children);
    childItem.value = [];
    childNum.value = 0;
    parmas.id = item.id;
    init();
  }
  init();
  var dom = document.getElementById('exhibits-right-scroll');
  dom.scrollTop = 0;
};
watch(
  () => styleInfo,
  (value) => {
    // const foundElement = styleInfo.value.moduleList.find((item) => item.id === store.childModel.id);
    // store.setchildModel(foundElement);
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      // console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => route.query.childId,
  (value) => {
    // const foundElement = styleInfo.value.moduleList.find((item) => item.id === store.childModel.id);
    // store.setchildModel(foundElement);
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      store.setchildModel(foundElement);
      if (foundElement.children && foundElement.children.length > 0) {
        nextTick(() => {
          info.value = foundElement.children[props.current];
          if (foundElement.children[props.current].children.length !== 0) {
            current.value = foundElement.children[props.current].children[0].id;
            remarks.value = foundElement.children[props.current].children[0].remarks;
            imgs.value = foundElement.children[props.current].children[0].value;
            subTitle.value = foundElement.children[props.current].children[0].subTitle;
            if (foundElement.children[props.current].children[0].children.length > 0) {
              childItem.value = foundElement.children[props.current].children[0].children;
              childNum.value = foundElement.children[props.current].children[0].children[0].id;
              parmas.id = childNum.value;
              init();
              // console.log('childItem', childItem.value);
            } else {
              childItem.value = [];
              childNum.value = 0;
              init();
            }
          } else {
            // parmas.id = store.childModel.children[props.current].children[0].id;

            init();
          }
        });
      }
    }
  },
  { immediate: true, deep: true },
);
// watch(
//   () => childModel,
//   (value) => {
//     // console.log('store.childModel', value.value);

//     info.value = store.childModel.children[props.current];
//     if (store.childModel.children[props.current].children.length !== 0) {
//       current.value = store.childModel.children[props.current].children[0].id;
//       remarks.value = store.childModel.children[props.current].children[0].remarks;
//       imgs.value = store.childModel.children[props.current].children[0].value;
//       if (store.childModel.children[props.current].children[0].children.length > 0) {
//         childItem.value = store.childModel.children[props.current].children[0].children;
//         childNum.value = store.childModel.children[props.current].children[0].children[0].id;
//         parmas.id = childNum.value;
//         init();
//         // console.log('childItem', childItem.value);
//       } else {
//         childItem.value = [];
//         childNum.value = 0;
//         init();
//       }
//     } else {
//       // parmas.id = store.childModel.children[props.current].children[0].id;

//       init();
//     }
//   },
//   { deep: true },
// );
watch(
  () => props.current,
  (value) => {
    // console.log(
    //   'store.childModel222',
    //   store.childModel.children[props.current],
    //   store.childModel.children[props.current].children.length,
    // );

    info.value = store.childModel.children[props.current];
    if (store.childModel.children[props.current].children.length !== 0) {
      current.value = store.childModel.children[props.current].children[0].id;
      remarks.value = store.childModel.children[props.current].children[0].remarks;
      imgs.value = store.childModel.children[props.current].children[0].value;
      subTitle.value = store.childModel.children[props.current].children[0].subTitle;
      if (store.childModel.children[props.current].children[0].children.length > 0) {
        childItem.value = store.childModel.children[props.current].children[0].children;
        childNum.value = store.childModel.children[props.current].children[0].children[0].id;
        parmas.id = childNum.value;
        init();
        // console.log('childItem', childItem.value);
      } else {
        childItem.value = [];
        childNum.value = 0;
        init();
      }
    } else {
      // parmas.id = store.childModel.children[props.current].children[0].id;

      init();
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => tabvalue,
  (value) => {
    init();
  },
  { deep: true },
);

// console.log(info.value, 'return');
</script>

<style lang="less" scoped>
.remarkStyle {
  font-size: 16px;
  line-height: 32px;

  color: #666666;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  // font-weight: 500;
  color: #666666;
  line-height: 32px;
  text-indent: 2em;
}
.title-box {
  font-size: 17px;
  // font-family: SourceHanSerif;
  // font-weight: 500;
  color: #333333;
  line-height: 32px;
  margin-top: 50px;
}
.exhibits-box {
  display: flex;
  width: 1180px !important;
  margin: auto;
  // width: 100% !important;
  // background: #f0e9e1;
}
.exhibits-left {
  padding: 8px 0px;
  // padding-right: 80px;
  width: 320px;
  // min-height: 600px;
  // flex: 1;
  color: #333333;
  // overflow-y: scroll;
}
.item-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 40px;
  // padding: 0 30px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  line-height: 40px;
  margin-bottom: 30px;
  > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    // top: 20px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    color: #333333;
    line-height: 24px;
  }
}
.exhibits-right-heard {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 66px;
  width: 780px;
  text-indent: 2em;

  // height: 280px;
  img {
    width: 780px;

    // height: 280px;
  }
  span {
    width: 780px;
    // font-weight: 500;
    color: #333333;
    line-height: 32px;
    margin-top: 32px;
    text-align: justify;
  }
}
.exhibits-right {
  // display: flex;
  // flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: flex-end;
  // justify-content: center;
  flex: 1;
  max-height: 100vh;
  scrollbar-width: none;
  padding-left: 80px;
}
.exhibits-right::-webkit-scrollbar {
  display: none;
}
.t-row {
  margin: 0;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 246px;
  overflow: hidden;
  transition: all 0.5s;
  cursor: pointer;
  img {
    // height: 210px;
    transition: all 0.5s;
  }
}
.exhibits-item:hover img {
  transform: scale(1.1);
}
.item-title {
  width: 100%;
  padding: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  span {
    font-size: 18px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    // font-weight: 500;
    color: #333333;
    line-height: 28px;
  }
}
.exhibits-content {
  width: 780px;
  // margin-top: 50px;
  padding-bottom: 80px;
}
.scroll-x-box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 40px;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.scroll-x-box-item {
  display: flex;
  justify-content: center;
  cursor: pointer;
  border: none;
  text-align: center;
  padding: 8px 0;
  // width: 100px;
  margin: 0 40px;
  font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  span {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
}
.scroll-x-box-item-active {
  border-bottom: 1px solid transparent;
}
.is-null-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 50px 0;
  span {
    font-size: 24px;
    // font-family: SourceHanSerif;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
  }
}
.shadow {
  width: 246px;
  height: 246px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  cursor: pointer;
  transition: all 0.5s;
  // border-radius: 50%;
}
.exhibits-item:hover .shadow {
  background: rgba(0, 0, 0, 0.4);
}
.exhibits-item:hover img {
  transform: scale(1.1);
}
.line {
  width: 0px;
  height: 1px;
  background: #000;
  transform: all 0.5s;
  margin: auto;
}
.t-pagination0 {
  :deep(.t-is-current) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
}
.t-pagination1 {
  :deep(.t-is-current) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:active) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
}
.t-pagination2 {
  :deep(.t-is-current) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:active) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
}
.t-pagination3 {
  :deep(.t-is-current) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
}
.t-pagination4 {
  :deep(.t-is-current) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
}
/deep/.t-pagination__number:hover {
  border-color: var(--td-component-border);
  color: #333;
}
/deep/.t-is-current:hover {
  color: var(--td-text-color-anti);
}
/deep/.t-input:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input.t-is-error {
  border-color: var(--td-component-border);
}
/deep/.t-input--focused {
  box-shadow: 0 0 0 0 !important;
}
/deep/.t-pagination__number:active {
  background: #171719 !important;
}
.subTitle {
  color: #333;
  font-family: 'SourceHanSerifCN-medium';
  font-size: 18px;
  font-style: normal;
  text-align: center;
  line-height: 30px; /* 166.667% */
  margin-bottom: 20px;
}
</style>
